<%@page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<link href="${apliPath}static/css/default.css" rel="stylesheet"
	type="text/css" />
<link rel="stylesheet" type="text/css"
	href="${apliPath}static/js/themes/metro-solidBlue/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="${apliPath}static/js/themes/icon.css" />
<script type="text/javascript"
	src="${apliPath}static/js/jquery-1.10.2.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/highChart/highcharts.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/highChart/modules/exporting.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/highChart/modules/offline-exporting.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/highChart/themes/sand-signika.js"></script>
<script type="text/javascript">
	var barChart1, barChart2;
	$(function() {
		Highcharts.setOptions({
			lang : {
				printChart : '打印图表',
				downloadPNG : '下载JPEG 图片',
				downloadJPEG : '下载JPEG文档',
				downloadPDF : '下载PDF 图片',
				downloadSVG : '下载SVG 矢量图',
				contextButtonTitle : '下载图片',
				months : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月',
						'九月', '十月', '十一月', '十二月' ],
				weekdays : [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ],
				shortMonths : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月',
						'九月', '十月', '十一月', '十二月' ]
			}

		});
		loadHotAlbumDatagrid();
		barChart1 = loadChart('column', 'chart1','下载次数统计');
		barChart2 = loadChart('spline', 'chart2','下载次数统计');
		initialChartsChangeButton();
	});
	function loadHotAlbumDatagrid() {
		$("#hotAlbum").datagrid({
			title : "专辑列表",
			fit : true,
			border : false,
			iconCls : 'icon-search',
			url : "${apliPath}album/queryAlbumsByPage",
			fitColumns : true,
			striped : true,
			loadMsg : "数据正在加载中，请稍等...",
			rownumbers : true,
			singleSelect : true,
			columns : [ [ {
				title : "标题",
				field : "title",
				width : 100,
			}, {
				title : "评分",
				field : "score",
				width : 70,
				sortable : true,
			}, {
				title : "发布日期",
				field : "createDate",
				width : 70,
			}, {
				title : "播音",
				field : "broadcast",
				width : 100,
			}, {
				title : "作者",
				field : "mentor",
				width : 80,
				formatter : function(value, row, index) {
					return row.mentor.mentorName;
				}
			} ] ],
			onClickRow : function(index, row) {
				generateHistogramChart(row);
			},
			onLoadSuccess : function(data) {
				barChart2 = loadChart('spline', 'chart2','下载次数统计');
				var albumNameArr = new Array();
				$.each(data.rows, function(index, row) {
					albumNameArr.unshift(row.id + '+_+' + row.title);
				});
				$.post("${apliPath}album/queryChart", {
					albumArr : albumNameArr.toString()
				}, function(data) {
					barChart2.xAxis[0].setCategories(data.chartX);
					barChart2.series[0].setData(data.chartY);
					barChart2.setSubtitle({
						text : "专辑总下载统计"
					});
				});
			},
			pagination : true,
			pageSize : 6,
			pageList : [ 3, 6, 9, 12 ],
			sortName : "score",
			sortOrder : "DESC",
			remoteSort : false,
		});
	}
	function initialChartsChangeButton() {
		$.each([ 'line', 'column', 'spline', 'area', 'areaspline', 'scatter',
				'pie' ], function(i, type) {
			$('#' + type).click(function() {
					  barChart2.series[0].update({
			                type: type
			            },true);
			});
		});
	}
</script>
<body class="easyui-layout" id="layoutBody">
	<div style="height:280" data-options="region:'north',border:false">
		<table id="hotAlbum" style="width: 600;height: 280">
		</table>
	</div>
	<!--   统计图展示开始    -->
	<div data-options="region:'center',border:false">
		<div class="easyui-tabs" data-options="fit:true">
			<div title="专辑下载统计">
				<button id="line">Line</button>
				<button id="spline">Spline</button>
				<button id="area">Area</button>
				<button id="areaspline">Areaspline</button>
				<button id="scatter">Scatter</button>
				<button id="pie">Pie</button>
				<div id="chart2" style=" margin: 0 auto;"></div>
			</div>
			<div title="音频下载统计">
				<div id="chart1" style=" margin: 0 auto;"></div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	function generateHistogramChart(album) {
		barChart1 = loadChart('column','chart1','专辑统计');
		$.post("${apliPath}chapter/queryChart", {
			id : album.id
		}, function(data) {
			barChart1.xAxis[0].setCategories(data.chartX);
			barChart1.series[0].setData(data.chartY);
			barChart1.setSubtitle({
				text : album.title + "下载统计"
			});
		});
	};
	function loadChart(chartType, chartID,chartTitle) {
		return new Highcharts.Chart({
			chart : {
				renderTo : chartID, // 注意这里一定是 ID 选择器
				type : chartType
			},
			title : {
				text : chartTitle
			},
			xAxis : {
				categories : [ "请选择统计项目" ],
				labels : {
					rotation : -45,
					style : {
						fontSize : '13px',
						fontFamily : 'Verdana, sans-serif'
					}
				}
			},
			yAxis : {
				min : 0,
				title : {
					text : chartTitle
				}
			},
			plotOptions : {
				column : {
					cursor : 'pointer',
					colorByPoint : true,
					dataLabels : {
						enabled : true,
						color : 'black',// colors[0],
						style : {
							fontWeight : 'bold'
						},
						formatter : function() {
							return this.y + ' 次';
						}
					}
				}
			},
			tooltip : {
				formatter : function() {
					s = this.x + ':<b>' + this.y;
					return s;
				}
			},
			series : [ {
				name : "统计",
				data : [],
				colors : [ '#058DC7', '#50B432', '#ED561B', '#DDDF00',
						'#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4',
						'#66131d', '#eeedf6', '#e90556', '#4745ba', '#9c8466',
						'#fe6626', '#36c57d' ]
			} ]
		});
	}
</script>



